<template>
    <view class="page">
        <!-- 背景 -->
        <image
            class="bg"
            src="https://admin.ximusen.cn/profile/upload/2022/12/23/254fb6ab-408e-432c-8f12-d7bffb37c240.png"
        />
        <view class="content">
            <view class="user">
                <view class="info">
                    <View class="infoView">
                        <image class="avatar" :src="userInfo.avatar" />
                    </View>

                    <view class="title">{{ userInfo.employeeInfo.jobName }}</view>
                </view>
                <view class="name">{{ userInfo.employeeInfo.name }}</view>
                <view class="store">{{ userInfo.employeeInfo.belongStoreName }}</view>
            </view>
            <!-- 客户信息 -->
            <view class="staff-item" @click="goToPage('customer')">
                <view class="left">
                    <!-- <view class="circle orange"> -->
                    <image
                        class="icon"
                        src="https://admin.ximusen.cn/profile/upload/ximusen_mini_app_img/xinxiNew.png"
                    />
                    <!-- </view> -->
                    <view class="text">客户信息</view>
                </view>
                <image class="arrow" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/arrow-right.png" />
            </view>
            <!-- 体重记录 -->
            <view class="staff-item" @click="goToPage('weight')">
                <view class="left">
                    <view class="circle red">
                        <image
                            class="icon"
                            src="https://admin.ximusen.cn/profile/upload/ximusen_mini_app_img/jiluNew.png"
                        />
                    </view>
                    <view class="text">体重记录</view>
                </view>
                <image class="arrow" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/arrow-right.png" />
            </view>
            <!-- 形体测评 -->
            <view class="staff-item" @click="goToPage('body')">
                <view class="left">
                    <view class="circle yellow">
                        <image
                            class="icon"
                            src="https://admin.ximusen.cn/profile/upload/ximusen_mini_app_img/xingtiNew.png"
                        />
                    </view>
                    <view class="text">形体测评</view>
                </view>
                <image class="arrow" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/arrow-right.png" />
            </view>
        </view>
    </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
    data() {
        return {};
    },
    computed: {
        ...mapState(["userInfo"]),
    },
    methods: {
        goToPage(type) {
            const routerPath = {
                customer: "/packageStaff/pages/customer/index",
                weight: "/packageStaff/pages/weightRecord/index",
                body: "/packageStaff/pages/bodyRecord/index",
            };
            uni.navigateTo({
                url: routerPath[type],
            });
        },
    },
};
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
